<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我卖出的 - 校园二手书交易平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        .order-card {
            margin-bottom: 20px;
        }
        .status-badge {
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" th:href="@{/}">校园二手书交易平台</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/}">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/book/list}">书籍列表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/book/publish}">发布书籍</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/book/my-books}">我的书籍</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" th:href="@{/order/my/buying}">我的订单</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                            <span sec:authentication="name"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <a class="dropdown-item" th:href="@{/user/profile}">个人信息</a>
                            <a class="dropdown-item" th:href="@{/user/change-password}">修改密码</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" th:href="@{/logout}">退出登录</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面内容 -->
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>我卖出的</h2>
            <div class="btn-group">
                <a th:href="@{/order/my/buying}" class="btn btn-outline-primary">我买到的</a>
                <a th:href="@{/order/my/selling}" class="btn btn-primary active">我卖出的</a>
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="row">
            <div th:if="${#lists.isEmpty(orders)}" class="col-12">
                <div class="alert alert-info">
                    您还没有任何销售订单。<a th:href="@{/book/publish}" class="alert-link">去发布书籍</a>
                </div>
            </div>
            
            <div class="col-12 order-card" th:each="order : ${orders}">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>
                                订单号：<strong th:text="${order.orderNo}">ORDER123456</strong>
                            </span>
                            <span class="status-badge" th:classappend="${
                                order.status == 0 ? 'badge badge-warning' :
                                order.status == 1 ? 'badge badge-info' :
                                order.status == 2 ? 'badge badge-primary' :
                                order.status == 3 ? 'badge badge-success' :
                                'badge badge-secondary'}"
                                th:text="${
                                order.status == 0 ? '待付款' :
                                order.status == 1 ? '待发货' :
                                order.status == 2 ? '待收货' :
                                order.status == 3 ? '已完成' :
                                '已取消'}">
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 class="card-title" th:text="${order.bookTitle}">书籍标题</h5>
                                <p class="card-text">
                                    <small class="text-muted">
                                        买家：<span th:text="${order.buyerName}">买家姓名</span><br>
                                        创建时间：<span th:text="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span><br>
                                        <span th:if="${order.status >= 1}">付款时间：<span th:text="${#dates.format(order.payTime, 'yyyy-MM-dd HH:mm')}">付款时间</span><br></span>
                                        <span th:if="${order.status >= 2}">发货时间：<span th:text="${#dates.format(order.shipTime, 'yyyy-MM-dd HH:mm')}">发货时间</span><br></span>
                                        <span th:if="${order.status >= 3}">完成时间：<span th:text="${#dates.format(order.completeTime, 'yyyy-MM-dd HH:mm')}">完成时间</span></span>
                                    </small>
                                </p>
                            </div>
                            <div class="col-md-4 text-right">
                                <h4 class="text-danger">¥<span th:text="${order.bookPrice}">价格</span></h4>
                                <div class="btn-group mt-3">
                                    <a th:href="@{/order/{id}(id=${order.id})}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-info-circle"></i> 订单详情
                                    </a>
                                    <button th:if="${order.status == 1}" class="btn btn-sm btn-success"
                                            th:onclick="'shipOrder(' + ${order.id} + ')'">
                                        <i class="fas fa-shipping-fast"></i> 发货
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function shipOrder(id) {
            if (confirm('确定要发货吗？')) {
                $.post('/order/' + id + '/status', { status: 2 })
                    .done(function(response) {
                        if (response) {
                            alert('发货成功');
                            location.reload();
                        } else {
                            alert('操作失败，请重试');
                        }
                    })
                    .fail(function() {
                        alert('操作失败，请重试');
                    });
            }
        }
    </script>
</body>
</html> 